<template>
	<div class="completed_details">
		<div class="completed_details_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">已完成<i class="el-icon-close"></i></div>
		</div>
		<div class="completed_details_title">
			<div class="completed_details_title_left">已完成/<i>订单详情</i></div>
			<div class="completed_details_title_right">
				<button class="completed_details_title_right_btn" @click="handerBase">返回</button>
			</div>
		</div>
		<div class="completed_details_content">
			<!-- 进度条 -->
			<div class="completed_details_content_top">
				<div class="process">
					<div class="progress"><div class="progress_box"></div></div>
					<div class="process_num">
						<div class="process_num_box"><div class="round">1</div></div>
						<div class="process_num_title">
							买家下单
								<div v-if="orderInfoData.create_time" class="process_num_title_text">{{orderInfoData.create_time | dateformat('YYYY-MM-DD')}}<div>{{orderInfoData.create_time | dateformat('hh:mm:ss')}}</div></div>
						</div>
					</div>
					<div class="process_num">
						<div class="process_num_box"><div class="round">2</div></div>
						<div class="process_num_title">
							买家付款
						<div v-if="orderInfoData.pay_time" class="process_num_title_text">{{orderInfoData.pay_time | dateformat('YYYY-MM-DD')}}<div>{{orderInfoData.pay_time | dateformat('hh:mm:ss')}}</div></div>
						</div>
					</div>
					<div class="process_num">
						<div class="process_num_box"><div class="round">3</div></div>
						<div class="process_num_title">
							商家发货
							<div v-if="orderInfoData.send_time" class="process_num_title_text">{{orderInfoData.send_time | dateformat('YYYY-MM-DD')}}<div>{{orderInfoData.send_time | dateformat('hh:mm:ss')}}</div></div>
						</div>
					</div>
					<div class="process_num">
						<div class="process_num_box"><div class="round">4</div></div>
						<div class="process_num_title">
							订单完成
							<div v-if="orderInfoData.finish_time" class="process_num_title_text">{{orderInfoData.finish_time | dateformat('YYYY-MM-DD')}}<div>{{orderInfoData.finish_time | dateformat('hh:mm:ss')}}</div></div>
						</div>
					</div>
				</div>
			</div>
			<div class="completed_details_content_center">
				<div class="completed_details_content_center_left">
					<div class="top">
						<div class="completed_details_content_center_left_box">
							<div class="left">订单编号：</div>
							<div class="right">{{orderInfoData.order_code}}</div>
						</div>
						<div class="completed_details_content_center_left_box">
							<div class="left">付款方式：</div>
							<div class="right">{{orderInfoData.pay_type=='1'?'微信支付':orderInfoData.pay_type=='2'?'线下支付':''}}</div>
						</div>
						<div class="completed_details_content_center_left_box">
							<div class="left">买家：</div>
							<div class="right right_active">{{orderInfoData.username}}</div>
						</div>
						<div class="completed_details_content_center_left_box">
							<div class="left">配送方式：</div>
							<div class="right">{{orderInfoData.move_way=='1'?'快递':orderInfoData.move_way=='2'?'自提':''}}</div>
						</div>
						<div class="completed_details_content_center_left_box">
							<div class="left">收货人：</div>
							<div class="right" id="content">{{orderInfoData.province}} {{orderInfoData.city}} {{orderInfoData.area}} {{orderInfoData.address}} {{orderInfoData.name}} {{orderInfoData.mobile}}</div>
							<font class="copyConsignee" data-clipboard-target="#content" @click="copyConsignee">复制</font>
						</div>
					</div>
					<div class="botton">
						<!-- <div class="botton_btn">修改订单收货信息</div> -->
					</div>
				</div>
				<div class="completed_details_content_center_right">
					<div class="completed_details_content_center_right_top">
						订单状态：<font>交易完成</font>
					</div>
					<div class="expressBox">
						<div class="for_details_content_center_right_logistics" v-for="(item,index) in orderInfoData.send_data" :key="index">
							<div class="packageBox">{{item.send_name}}</div>
							<div class="for_details_content_center_right_logistics_top">
								快递公司：<i>{{item.express_name}}</i>
							</div>
							<div class="for_details_content_center_right_logistics_center">
								快递单号：<i>{{item.courier_num}}</i>
							</div>
							<div class="for_details_content_center_right_logistics_bottom">
								发货时间：<i>{{$moment(item.send_time*1000).format('yyyy-MM-DD HH:mm:ss')}}</i>
							</div>
						</div>
					</div>
					<!-- <div class="completed_details_content_center_right_center">
						<div class="delivery_text">
							<i>修改佣金</i><i>添加备注</i>
						</div>
					</div>
					<div class="completed_details_content_center_right_botton">
						友情提示：交易成功，如买家有售后申请，请与买家进行协商，妥善处理;
					</div> -->
				</div>
				<!-- <div class="completed_details_content_center_text">
					<div class="completed_details_content_center_text_font">一级分销商</div>
					<div class="completed_details_content_center_text_title">
						<div class="completed_details_content_center_text_title_box">
							<div class="completed_details_content_center_text_title_box_left">姓名：</div>
							<div class="completed_details_content_center_text_title_box_right text_active">未填写<i>?</i></div>
						</div>
						<div class="completed_details_content_center_text_title_box">
							<div class="completed_details_content_center_text_title_box_left">手机号：</div>
							<div class="completed_details_content_center_text_title_box_right"></div>
						</div>
						<div class="completed_details_content_center_text_title_box">
							<div class="completed_details_content_center_text_title_box_left">佣金：</div>
							<div class="completed_details_content_center_text_title_box_right">2</div>
						</div>
					</div>
					<div class="completed_details_content_center_text_font">二级分销商</div>
					<div class="completed_details_content_center_text_title">
						<div class="completed_details_content_center_text_title_box">
							<div class="completed_details_content_center_text_title_box_left">姓名：</div>
							<div class="completed_details_content_center_text_title_box_right text_active">未填写<i>?</i></div>
						</div>
						<div class="completed_details_content_center_text_title_box">
							<div class="completed_details_content_center_text_title_box_left">手机号：</div>
							<div class="completed_details_content_center_text_title_box_right"></div>
						</div>
						<div class="completed_details_content_center_text_title_box">
							<div class="completed_details_content_center_text_title_box_left">佣金：</div>
							<div class="completed_details_content_center_text_title_box_right">2</div>
						</div>
					</div>
				</div> -->
			</div>
			<h3 class="table_text">商品信息</h3>
			<div class="completed_details_content_bottom">
				<table>
						<tr>
						<th style="width: 20%;">商品标题</th>
            <th style="width: 19%;">规格、编号、条码</th>
            <th style="width: 11%;">单价</th>
            <th style="width: 11%;">数量</th>
            <th style="width: 13%;">原价</th>
            <th style="width: 13%;">折扣后</th>
            <th style="width: 13%;">状态</th>
					</tr>
					<tr v-for="(v,i) in orderInfoData.product_lst" :key="i">
						<td style="width: 20%;">
							<div class="tab_img">
								<img class="tab_img" style="border:0;" :src="v.main_imgurl" alt="">
							</div>
							<div class="tab_right">
								<div class="tab_right_title">{{v.product_title}}</div>
								<!-- <div class="tab_right_invoice">支持开票</div> -->
							</div>
						</td>
						<td class="td_active" style="width: 19%;">
							<div class="tab_box">
								<div class="tab_box_content">
									规格：
									<template v-if="v.attr_params && v.attr_params.length">
										 <p class="tab_spec" v-for="(item,index) in v.attr_params" :key="index">
											<i>{{item.value}}</i>
										</p>
									 </template>
									 <template v-else>无</template>
								</div>
								<div class="tab_box_content">编码：{{v.specss?v.specss:' 无'}}</div>
								<div class="tab_box_content">条码：{{v.specsss?v.specsss:' 无'}}</div>
							</div>
						</td>
              <td style="width: 11%;">￥{{v.price}}</td>
              <td style="width: 11%;">{{v.num}}个</td>
              <td style="width: 13%;">￥{{v.primary_price}}</td>
              <td style="width: 13%;">￥{{v.pay_price}}</td>
              <td style="width: 13%;">{{v.order_status=='1'?'待付款':v.order_status=='2'?'待发货':v.order_status=='3'?'待收货':v.order_status=='4'?'已完成':'已关闭'}}</td>
					</tr>
				</table>
				<div class="price">
					<div class="price_box">
						<div class="price_box_left">商品小计：</div>
						<div class="price_box_right">￥{{orderInfoData.price}}</div>
					</div>
					<div class="price_box">
						<span class="price_box_left">运费：</span>
						<span class="price_box_right">￥{{orderInfoData.move_price}}</span>
					</div>
           <div class="price_box">
            <div class="box-left">
              <span class="price_box_left price_active">总价：</span>
              <span class="price_box_right price_active">￥{{orderInfoData.price}}</span>
            </div>
            <div class="box-center">
              <span class="price_box_left price_active">已付定金：</span>
              <span class="price_box_right price_active">￥{{orderInfoData.deposit_price}}</span>
            </div>
            <div class="box-right" v-if="orderInfoData.is_many_way==1">
              <span class="price_box_left price_active">已付尾款：</span>
              <span class="price_box_right price_active">￥{{orderInfoData.balance_price}}</span>
            </div>
          </div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import ClipboardJS from 'clipboard';
	
	export default {
		data() {
			return {
				total:0.00,							// 实付款
				freight:0.00,						// 运费
				subtotal:0.00,						// 小计
				changePrice:0.00,					// 卖家改价
				completedList:[
					{
						name:'一日三餐即食花胶鱼胶一日三餐即食花胶鱼胶',
						specs:'1盒（桂圆+雪燕+金麦）',
						specss:'无',
						specsss:'无',
						price:128.00,
						num:4,
						freight:0,
						prices:512,
						pricess:272,
						state:'已完成'
					},
					{
						name:'一日三餐即食花胶鱼胶一日三餐即食花胶鱼胶',
						specs:'1盒（桂圆+雪燕+金麦）',
						specss:'无',
						specsss:'无',
						price:128.00,
						num:4,
						freight:0,
						prices:512,
						pricess:272,
						state:'已完成'
					}
				],
				orderInfoData:[],
        orderType: "", //订单类型 productPack-产品包订单
			}
		},
		mounted() {
      this.orderType = this.$route.query.type;
			this._getOrderInfo();
		},
		methods: {
			handerBase() {
				this.$router.go(-1);
			},
			// 实现复制功能
			copyConsignee() {
				// 括号中的内容：对应复制按钮的class
				let clipboard = new ClipboardJS('.copyConsignee');
				let that = this
				clipboard.on('success', function(e) {
					that.$message.success('复制成功')
					console.log("复制成功");
					e.clearSelection();
				});
				clipboard.on('error', function(e) {
					console.log("复制失败，请重试");
					console.log(e)
				});
			},
			//获取传过来的order_id，获取商品详情
			_getOrderInfo(){
				console.log(this.$route);
				let order_id = this.$route.query.order_id;
				let store_id = localStorage.getItem('sid')
        let url = this.orderType == 'productPack'?'/api/admin/newpk/PackOrder/detail':'/api/admin/shop/productOrder/detail';
				this.$http.post(url,{order_id,store_id}).then(res=>{
					console.log(res);
					if(res.code==1){
						this.orderInfoData = res.data?res.data:[];
					}else{
						this.$message.warning(res.msg)
					}
				})
			}
		},
		computed: {
			// 商品小计
			subtotalPrice() {
				this.completedList.filter(v => {
					this.subtotal += v.price;
				});
				return `${this.subtotal}.00`;
			},
			// 运费
			freightPrice() {
				this.completedList.filter(v => {
					this.freight += v.freight;
				})
				return `${this.freight}.00`
			},
			// 卖家改价
			changePrices() {
				for(let i=0;i<this.completedList.length;i++) {
					this.changePrice += this.completedList[i].prices - this.completedList[i].pricess;
				}
				return `${this.changePrice}.00`;
			},
			
			// 实付款
			totalPrice() {
				this.completedList.filter(v => {
					this.total += v.pricess;
				});
				return `${this.total}.00`;
			}
		},
	}
</script>

<style lang="less" scoped="scoped">
	@import 'details.less';
</style>
